<template>
  <div>
    <top-bar backShow="true" titleShow="true" title="大师主页">
      <div class="setting" slot="r-btn">
        <div></div>
      </div>
    </top-bar>
    <div class="content followindex">
      <info activeIndex="1"></info>
      <!-- 跟牛单 -->
      <ul class="list-container">
        <li>
          <div class="little-box">
            <ol class="img-txt clearfix">
              <dl><img src="../../assets/icon-badge-tit.png"></dl>
              <dl>
                <dt>鲍比Bobby</dt>
                <dd class="gfc-orange2">了解更多</dd>
              </dl>
              <dl>
                <dd>
                  <button class="btn-detail">马上交易</button>
                </dd>
              </dl>
            </ol>
            <dl class="follower items-bet">
                <img src="../../assets/icon-badge-1.png" height="120" width="124" alt="">
                <img src="../../assets/icon-badge-1.png" height="120" width="124" alt="">
                <img src="../../assets/icon-badge-1.png" height="120" width="124" alt="">
                <img src="../../assets/icon-badge-1.png" height="120" width="124" alt="">
                <img src="../../assets/icon-badge-1.png" height="120" width="124" alt="">
                <img src="../../assets/icon-badge-1.png" height="120" width="124" alt="">
            </dl>
          </div>
          <div class="progress">
            <span class="gfc-orange2">0.001%</span>
          </div>
        </li>
        <li>
          <div class="little-box">
            <ol class="img-txt clearfix">
              <dl><img src="../../assets/icon-badge-tit.png"></dl>
              <dl>
                <dt>鲍比Bobby</dt>
                <dd class="gfc-orange2">了解更多</dd>
              </dl>
              <dl>
                <dd>
                  <button class="btn-detail">马上交易</button>
                </dd>
              </dl>
            </ol>
            <dl class="follower items-bet">
                <img src="../../assets/icon-badge-1.png" height="120" width="124" alt="">
                <img src="../../assets/icon-badge-1.png" height="120" width="124" alt="">
                <img src="../../assets/icon-badge-1.png" height="120" width="124" alt="">
                <img src="../../assets/icon-badge-1.png" height="120" width="124" alt="">
                <img src="../../assets/icon-badge-1.png" height="120" width="124" alt="">
                <img src="../../assets/icon-badge-1.png" height="120" width="124" alt="">
            </dl>
          </div>
          <div class="progress">
            <span class="gfc-orange2">0.001%</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import topBar from '../../components/topBar/topBar.vue'
  import info from '../../components/masterInfo/masterInfo.vue'
  export default {
    data() {
      return {}
    },
    components: {
      topBar,
      info
    },
  }
</script>

<style scoped>
.content.followindex {
  font-size: .16rem;
  color: #fff;
}

.menu {
  font-size: .18rem;
  color: #fff;
  text-align: center;
  background: #282F37;

}
.menu li {
  padding: .2rem 0;
  flex: 1;
  color: #6A747F;
}
.menu li.active {
  color: #fff;
  border-bottom: .02rem solid #F25E44;
}
.sort {
  margin-top: .1rem;
  padding: .2rem 0;
  background: #282F37;
}
ul.list-container>li {
  background: #282F37;
  font-size: .16rem;
  color: #6a747f;
  padding: 0 .18rem;
  margin-top: .1rem;
}

.little-box {
  padding: .2rem 0;
  border-bottom: .01rem solid  #6a747f;
}
.progress {
  padding: .2rem 0;
  text-align: center;
}
button.btn-detail {
  font-size: .16rem;
  background: #F25E44;
  border-radius: .04rem;
  width: .80rem;
  height: .3rem;
  line-height: .16rem;
  color: #fff;
}
/* 一行多个文字快 */
dl.txt-inline {
  padding-top: .2rem;
  display: flex;
  justify-content:space-between;
}
dl.txt-inline span {
  padding-left: .1rem;
}
/* 图文混排 */
ol.img-txt dl {
  float: left;
}
ol.img-txt dl:last-child {
  float: right;
}
ol.img-txt dl img {
  border-radius: 50%;
  width: .398rem;
  height: .435rem;
  margin-right: .182rem;
}
ol.img-txt dl dt {
  color: #fff;
  line-height: .13rem;
}
ol.img-txt dl dd {
  line-height: .13rem;
  padding-top: .12rem;
  font-size: .14rem;
}
ol.img-txt dl dd:first-child {
  padding-top: 0;
}
ol.img-txt dl dd span {
  padding-left: .1rem;
}
.follower {
  padding: .402rem 0 0 0;
}
.follower img {
  width: .298rem;
  height: .326rem;
  display: inline-block;
  margin-right: .06rem;
  vertical-align: middle;
}
</style>
